<template>
  <div id="sysType" :style="{ height: height }" v-loading="loading">
    <cs-header v-if="sysNameObj.systemSwitch === 'ON'"></cs-header>
    <tc-header v-else></tc-header>
    <div class="sysType-list">
      <el-row :gutter="20" v-if="systemList.length === 5">
        <el-col :span="2"></el-col>
          <el-col :span="4" v-for="(item, index) in systemList" :key="index">
            <div class="system" @click="handleClick(item)">
              <i class="iconfont" :class="item.icon_id"></i>
              <p>{{ item.sys_name }}</p>
            </div>
          </el-col>
        <el-col :span="2"></el-col>
      </el-row>
      <el-row :gutter="40" v-if="systemList.length === 4">
        <el-col :span="2"></el-col>
        <el-col :span="5" v-for="(item, index) in systemList" :key="index">
          <div class="system" @click="handleClick(item)">
            <i class="iconfont" :class="item.icon_id"></i>
            <p>{{ item.sys_name }}</p>
          </div>
        </el-col>
        <el-col :span="2"></el-col>
      </el-row>
      <el-row :gutter="40" v-if="systemList.length === 3">
        <el-col :span="3"></el-col>
        <el-col :span="6" v-for="(item, index) in systemList" :key="index">
          <div class="system" @click="handleClick(item)">
            <i class="iconfont" :class="item.icon_id"></i>
            <p>{{ item.sys_name }}</p>
          </div>
        </el-col>
        <el-col :span="3"></el-col>
      </el-row>
      <el-row :gutter="50" v-if="systemList.length === 2">
        <el-col :span="4"></el-col>
        <el-col :span="8" v-for="(item, index) in systemList" :key="index">
          <div class="system" @click="handleClick(item)">
            <i class="iconfont" :class="item.icon_id"></i>
            <p>{{ item.sys_name }}</p>
          </div>
        </el-col>
        <el-col :span="4"></el-col>
      </el-row>
      <el-row v-if="systemList.length === 1">
        <el-col :span="8"></el-col>
        <el-col :span="8" v-for="(item, index) in systemList" :key="index">
          <div class="system" @click="handleClick(item)">
            <i class="iconfont" :class="item.icon_id"></i>
            <p>{{ item.sys_name }}</p>
          </div>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { nextPage } from '../../../assets/js/index'
  import ajax from '../../../api/ajax/ajax'
  import api from '../../../api/url'
  import { mapMutations, mapState } from 'vuex'
  import sysNameObj from '../../../sysNameObj'
  import csHeader from '../self/header'
  import tcHeader from './header'

  export default {
    name: 'systemList',
    components: {
      csHeader,
      tcHeader
    },
    data () {
      return {
        systemList: [],
        height: '',
        userName: '',
        system_name: '',
        applist: [],
        selectAppId: '',
        loading: false,
        sysNameObj: sysNameObj
      }
    },
    computed: {
      ...mapState([
        'userid',
        'appId'
      ])
    },
    watch: {
      appId (val) {
        this.getUserSystemList(val)
      }
    },
    methods: {
      ...mapMutations([
        'pb_updateSysName',
        'pd_updateSysNo'
      ]),
      getUserSystemList (val) {
        this.loading = true
        ajax.post(api.GET_SYSTEM_LIST, {app_id: val}).then((res) => {
          if (res.data.length > 0) {
            let arrlist = []
            res.data.forEach(item => {
              if (item.isSelected === '1') {
                arrlist.push(item)
              }
            })
            this.systemList = arrlist
            this.loading = false
          }
        })
      },
      handleClick (item) {
        this.pb_updateSysName(item.sys_name)
        this.pd_updateSysNo(item.sys_no)
        ajax.post(api.GO_TO_SYSTEM, { sys_no: item.sys_no, app_id: this.appId }).then((res) => {
          if (item.sys_no === 'M203') { // 发布
            ajax.post('/iap/gotoSetSession', { AppId: this.appId }).then(res => {
              nextPage(item.sys_url)
            })
          } else if (item.sys_no === 'M204') { // 网关
            ajax.post('/net/gotoWorkspace').then(res => {})
            nextPage(item.sys_url)
          } else {
            nextPage(item.sys_url)
          }
        })
      },
      // 退出
      logout () {
        this.$confirm('将退出登录是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax.post(api.LOGOUT).then(res => {
            this.$message({
              type: 'success',
              message: '退出成功!'
            })
            setTimeout(() => {
              window.location.href = '/'
            }, 500)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
      }
    },
    created () {
      this.userName = sessionStorage.getItem('userName')
      this.getUserSystemList(this.appId)
      this.height = window.innerHeight + 'px'
      window.onresize = () => {
        this.height = window.innerHeight + 'px'
      }
    }
  }
</script>

<style lang="stylus">
  #sysType
    background rgba(230,230,230,0.361)
    .sys-header
      background #262626
      height 50px
      line-height 50px
      text-align right
      padding-right 10px
      .lf
        font-size 24px
        color #ddd
        padding-left 20px
      span
        padding 5px 10px
        color #bbb
        font-size 16px
        cursor pointer
      .rf
        .el-select
          .el-input
            .el-input__inner
              width 180px
              padding 0 !important
              color #bbb
              background transparent
              border 0 none
              border-bottom 1px solid #bbb
              border-radius 0
        .el-input__suffix
          padding 0
          .el-input__suffix-inner
            padding 0
        .el-select .el-input .el-input__icon
          width 14px
    .sysType-list
      width 100%
      margin auto
      padding 10px
      padding-top 160px
      .el-row
        .el-col
          margin-bottom 20px
          .system
            background #016DFB
            border-radius 5px
            color #fff
            text-align center
            cursor pointer
            padding-bottom 20px
            .iconfont
              font-size 150px
            p
              font-size 30px
              height 50px
              line-height 50px
</style>
